<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" th:href="@{../bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{../css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{../css/main.css}">
    <script th:src="@{../jquery/jquery-2.1.1.min.js}"></script>
    <script th:src="@{|/jquery/jquery.md5.js|}"></script>
    <script th:src="@{../bootstrap/js/bootstrap.min.js}"></script>
    <script th:src="@{../script/docs.min.js}"></script>
    <script th:src="@{../layer/layer.js}"></script>
    <link rel="stylesheet" th:href="@{../css/cactus.css}">
    <style>
        .tree li {
            list-style-type: none;
            cursor: pointer;
        }

        table tbody tr:nth-child(odd) {
            background: #F4F4F4;
        }

        table tbody td:nth-child(even) {
            color: #C00;
        }

        #box1 {
            position: relative
        }

        #box2 {
            width: 200px;
            height: 200px;
            position: absolute;
            right: 0;
            bottom: 0
        }

    </style>
</head>

<body>


<div th:replace="../templates/nav"></div>
<div class="container-fluid">
    <div class="row">
        <div th:replace="../templates/menu"></div>
        <div class="col-sm-5 col-sm-offset-3 col-md-5 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
                </div>
                <div class="panel-body">
                    <form class="form-inline" role="form" style="float:left;">
                        <!--   从数据库中查询出所有的work 需要加班中的申请人信息-->
                        <div class="form-group ">
                            <label>姓名</label>
                            <select name="uname" id="uname" class="form-control" placeholder="请选择老师">
                                <option value="">请选择姓名</option>
                                <option th:each="user,sta:${userList}" th:text="${user.uname}"
                                        th:value="${user.uname}">
                                </option>
                            </select>
                        </div>
                        <button type="button" class="btn btn-warning" id="btnSearch"><i
                                class="glyphicon glyphicon-search"></i> 查询
                        </button>

                    <br>
                    <hr style="clear:both;">
                    <div class="table-responsive">
                        <table class="table  table-bordered">
                            <thead>
                            <tr>
                                <th width="30">NO.</th>
                                <th>登录人姓名</th>
                                <th>登录时间</th>
                                <th>登录IP地址</th>
                                <th>是否正常</th>

                            </tr>
                            </thead>
                            <tbody id="tbody">

                            </tbody>
                            <tfoot>
                            <tr>
                                <td colspan="5" align="center">
                                    <ul class="pagination" id="byPage">

                                    </ul>
                                </td>
                            </tr>

                            </tfoot>
                        </table>
                    </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-md-2 col-sm-offset-1">
            <div class="wrap">   <!--最大的空间div-->
                <div class="cube">   <!--正方体的box-->
                    <!--这个是大的正方体的六面-->
                    <div class="out-front">前面</div>
                    <div class="out-back">后面</div>
                    <div class="out-left">左面</div>
                    <div class="out-right">右面</div>
                    <div class="out-top">上面</div>
                    <div class="out-bottom">下面</div>

                    <!--这个是小的正方体的六面-->
                    <span class="in-front">             <!--前面的点数1-->
                <span class="points"></span>
            </span>
                    <span class="in-back">              <!--后面的点数3-->
                <span class="points"></span>
                <span class="points pitB2"></span>
                <span class="points pitB3"></span>
            </span>
                    <span class="in-left">              <!--左面的点数2-->
                <span class="points"></span>
                <span class="points pitL2"></span>
            </span>
                    <span class="in-right">             <!--右面的点数4-->
                <span class="points"></span>
                <span class="points"></span>
                <span class="points"></span>
                <span class="points"></span>
            </span>
                    <span class="in-top">               <!--上面的点数5-->
                <span class="pitT1">
                    <span class="points"></span>
                    <span class="points "></span>
                </span>
                <span class="pitT2">
                    <span class="points"></span>
                </span>
                <span class="pitT3">
                    <span class="points"></span>
                    <span class="points"></span>
                </span>
            </span>
                    <span class="in-bottom">            <!--下面的点数6-->
                <span class="points"></span>
                <span class="points"></span>
                <span class="points"></span>
                <span class="points"></span>
                <span class="points"></span>
                <span class="points"></span>
            </span>

                </div>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    $(function () {
        $(".list-group-item").click(function () {
            if ($(this).find("ul")) {
                $(this).toggleClass("tree-closed");
                if ($(this).hasClass("tree-closed")) {
                    $("ul", this).hide("fast");
                } else {
                    $("ul", this).show("fast");
                }
            }
        });
        showList(1);
    });
    $("#btnSearch").click(function () {
        showList(1);
    });
    //查询条件查询
    function showList(currentPage) {
        $.ajax({
            url: "/LogRecord/loglistDo",
            type: "post",
            data: {
                "currentPage": currentPage,
                "uname": $("#uname").val(),
                // "address": $("#address").val(),
                // "btime": $("#btime").val(),
                // "etime": $("#etime").val()
            },
            success: function (data) {
                if (data.result) {
                    var str = "";
                    $.each(data.logList, function (index,log) {
                        str += "<tr>";
                        str += "<td>" + (index + 1) + "</td>";
                        str += "<td>" + log.uname + "</td>";
                        str += "<td>" + log.ltime + "</td>";
                        str += "<td>" + log.ip + "</td>";
                        str += "<td>" + log.op + "</td>";
                        str += "</tr>";

                    });
                    $("#tbody").html(str);
                    var pageStr = "";
                    pageStr += '<li class="' + (data.pageBean.currentPage == 1 ? 'disabled' : '') + '"><a href="#" onclick="showList(' + (data.pageBean.currentPage - 1) + ')">上一页</a></li>';
                    for (var i = 1; i <= data.pageBean.countPage; i++) {
                        pageStr += '<li class="' + (data.pageBean.currentPage == i ? 'active' : '') + '"><a href="#" onclick="showList(' + i + ')">' + i + '<span class="sr-only">(current)</span></a></li>';
                    }
                    pageStr += '<li class="' + (data.pageBean.currentPage == data.pageBean.countPage ? 'disabled' : '') + '"><a href="#" onclick="showList('+(data.pageBean.currentPage==data.pageBean.countPage?data.pageBean.countPage:data.pageBean.currentPage+1)+')">下一页</a></li>';
                    $("#byPage").html(pageStr);
                }
            }
        });
    }
</script>
</body>
</html>